<!DOCTYPE html >
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>发图看板</title>
<script type="text/javascript">default_theme = 'skin_blue';</script>
<%@include file="/resource/component_BI.jsp"%>
</head>
<body class="bi-sjft">
<!-- loading -->
<div id="loading">
	<div id="loading-center"><div id="loading-center-absolute">
		<div class="object" id="object_four"></div><div class="object" id="object_three"></div>
		<div class="object" id="object_two"></div><div class="object" id="object_one"></div>
	</div></div>
</div>
<div class="header">
	<div class="title">设计发图看板</div>
	<div class="hd_bg_left"></div>
	<div class="hd_bg_right"></div>
</div>
<div class="layout">
	<div class="clearfix">
		<div class="panel col2">
	    	<div class="panel-title"><i class="title">部门完成率</i></div>
	    	<div class="panel-cont">
	    		<div class="chart-wrap"><div class="chartDiv" id="chartBMWCL"></div></div>
	    	</div>
		</div>
		<div class="panel col2">
	    	<div class="panel-title"><i class="title">CI成熟度</i></div>
	    	<div class="panel-cont">
	    		<div class="chart-wrap"><div class="chartDiv" id="chartCICSD"></div></div>
	    	</div>
		</div>
	</div>
	<div class="panel">
    	<div class="panel-title"><i class="title">CI成长度</i></div>
    	<div class="panel-cont">
    		<div class="chart-wrap"><div class="chartDiv" id="chartCICZD"></div></div>
    	</div>
	</div>
	<div class="panel panel-grid">
    	<div class="panel-title"><i class="title">CI明细</i></div>
    	<div class="panel-cont">
    		<iframe src="" id="gridFrame" frameborder="0" style="width:100%;height:100%;"></iframe>
    	</div>
	</div>
</div>
<div class="updateTime">数据更新时间：2020-03-09</div>
</body>
</html>
<script type="text/javascript">
var barColor = ['rgba(255, 219, 92, 0.2)', 'rgba(159, 230, 185, 0.6)'];
var barBorderColor = ['#ffdb5c', '#ffdb5c'];
var lineColor = ['#b66e02', '#06ac0d'];
if (theme && theme == 'skin_blue') {
	chartTextColor = '#eee';
	barColor = ['rgba(255, 247, 0, 0.2)', 'rgba(0, 178, 70, 0.5)'];
	barBorderColor = ['rgba(255, 247, 0, 1)', 'rgba(0, 178, 70, 0.5)'];
	lineColor = ['#fff700', '#06ac0d'];
}
/* 页面加载完成后执行 */
$(function(){
	var gridUrl = 'page/pageGrid.jsp?pageSize=10&theme='+ theme;
	$("#gridFrame").attr("src", gridUrl);
	
	// 部门完成率
	echartByCustom('chartBMWCL',{
		yAxisName: '完成率(%)',
		legendData: ['计划完成率','实际完成率'],
		xAxisData: ['1部','2部','3部','5部','6部','7部'],
		grid: { left: 50, right: 50, bottom: 30 },
		series: [
	        { name:'计划完成率', type:'bar', barMaxWidth:35, data: [20,22,28,22,30,60],
	        	itemStyle:{ normal:{ label: { show:true, position:'top', formatter: '{c}%' },
	        		color: barColor[0], borderColor: barBorderColor[0], borderWidth: 2
	        	}}
	        },
	        { name:'实际完成率', type:'bar', barMaxWidth:35, data: [18,19,20,20,26,55], barGap: "-100%",
	        	itemStyle:{ normal:{ label: { show:true, formatter: '{c}%' }, color: barColor[1] } },
			}
	    ],
	    tooltipFormatter: '{b}<br />{a}: {c0}%<br />{a1}: {c1}%',
	    eventClick: function(param){
	    	var name = param.name,
	    		seriesName = param.seriesName;
	    	var params = '?name='+ name +'&type='+ seriesName +'&theme='+ theme;
	    	var url = 'page/pageGrid.jsp'+ encodeURI(encodeURI(params));
	    	// 弹出窗口
	    	winCustomDialog({url:url});
	    }
	});
	
	// CI成熟度
	echartByCustom('chartCICSD',{
		chartType: 'pie',
		legendData: ['M1','M2','M3','M4'],
	    series: [{
	        name: '系列',
            type: 'pie',
            radius: '80%',
            center: ['40%', '50%'],
            minAngle: 10, 
            roseType: 'area',
            itemStyle:{ normal:{ label: { show:true, formatter: '{b}: {c}({d}%)' } } },
	        data: [
	        	{ name:'M1', value: 3 },
	        	{ name:'M2', value: 2 },
	        	{ name:'M3', value: 5 },
	        	{ name:'M4', value: 1 }
	        ]
	    }],
	    tooltipTrigger: 'item',
	    tooltipFormatter: '{a} <br/>{b} : {c} ({d}%)'
	});
	
	// CI成长度
	var legendData = [], series = [];
	var xAxisData = ['2020-01-01','2020-02-01','2020-03-01','2020-04-01','2020-05-01'];
	var getSerieData = function(type){
		var data = [];
		var v = 10;
		$.each(xAxisData, function(i) {
			if (i > 0) v = data[i-1] + Math.round(Math.random()*20);
			if ((type == 0 && i != 2) || (type == 2 && i < 2)) v = null;
			if (type == 3 && i > 2) v = null;
			data.push(v);
		});
		return data;
	}
	var len = 6;
	// 计划数据
	for (var i = 0; i <= len; i++) {
		var stype = 'bar';
		var sname = 'M'+ i +'计划数';
		if (i == len){
			stype = 'line';
			sname = '计划完成率';
		}
		legendData.push(sname);
		var dataType = 1;
		if (i < len) dataType = 2;
		var serieData = getSerieData(dataType);
		var serie = { name: sname, type: stype, data: serieData };
		if (i == len){
			serie.yAxisIndex = 1;
			serie.symbolSize = 12;
			serie.itemStyle = { normal:{ color: lineColor[0], lineStyle: { type: 'dotted' } } };
		} else {
			serie.barMaxWidth = 25;
			serie.itemStyle = { normal:{ label: { show:true, position:'top' }, color: barColor[0], borderColor: barBorderColor[0], borderWidth: 2 }};
		}
		series.push(serie);
	}
	legendData.push('');
	// 实际数据
	for (var i = 0; i <= len; i++) {
		var stype = 'bar';
		var sname = 'M'+ i +'实际数';
		if (i == len){
			stype = 'line';
			sname = '实际完成率';
		}
		legendData.push(sname);
		var dataType = 0;
		if (i == len) dataType = 3;
		var serieData = getSerieData(dataType);
		var serie = { name: sname, type: stype, data: serieData };
		if (i == len) {
			serie.yAxisIndex = 1;
			serie.symbolSize = 12;
			serie.itemStyle = { normal:{ color: lineColor[1] } };
		} else {
			serie.barMaxWidth = 25;
			serie.xAxisIndex = 1;
			serie.itemStyle = { normal:{ label: { show:true, position:'top' }, color: barColor[1] }};
		}
		series.push(serie);
	}
	echartByCustom('chartCICZD',{
		grid: { top: 65, left: 50, right: 50, bottom: 30 },
		legendData: legendData,
		xAxis: [
			{ data: xAxisData },
			{ data: xAxisData, show: false }
		],
		yAxis: [
			{ name:'数量' },
			{ name:'完成率(%)' }
		],
	    tooltipFormatter: function(d){
	    	return d[0].name +
	    			formatterTooltip(d, 0, 8)+
	    			formatterTooltip(d, 1, 9)+
	    			formatterTooltip(d, 2, 10)+
	    			formatterTooltip(d, 3, 11)+
	    			formatterTooltip(d, 4, 12)+
	    			formatterTooltip(d, 5, 13)+
	    			formatterTooltip(d, 6, 7);
	    },
		series: series
	});
	
	// 关闭加载效果
	$("#loading").fadeOut();
});

// 格式化tooltip数据
var formatterTooltip = function (d, x, y){
	var tip = '';
	var d1 = d[x].data,
		d2 = d[y].data,
		t1 = d[x].seriesName,
		t2 = d[y].seriesName;
	if (d1) {
		if (t1.indexOf('完成率') != -1) {
			tip += t1 + '：' + d1 +'%';
		} else {
			tip += t1;
			if (d2) tip += '/'+ t2;
			tip += '：'+ d1;
		}
	}
	if (d2) {
		if (t2.indexOf('完成率') != -1) {
			tip += '<br/>' + t2 +'：'+ d2 +'%';
		} else {
			tip += ' / '+ d2;
		}
	}
	
	if (tip) tip = '<br/>'+ tip;
	return tip;
}
</script>